<template>
  <view class="content">
    <LfHeader></LfHeader>
    <view class="blogs-box flex-scrollBox">
      <view class="tagBox">
        <span :class="tagId===item.id?'active':''" v-for="item in tagList" @click="changeTag(item.id)">{{item.name}}</span>
      </view>
      <view class="blogs" v-for="item in blogList" @click="toBlog(item.id)">
        <img class="blogs-img" :src="item.pic" alt="" />
        <view class="blogs-right">
          <view class="title">
            {{item.title}}
          </view>
          <view>
            <span class="source active">
              {{item.source}}
            </span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getBlogList
} from '../../utils/http'
export default {
  data () {
    return {
      tagList: [],
      appId: 1,
      moduleId: 1,
      blogList: [],
      tagId: 0
    }
  },
  created () {
    this.appId = this.$route.query.appId
    this.moduleId = this.$route.query.moduleId
    this.getList(this.appId)
  },
  methods: {
    async getList (appId) {
      const {
        data
      } = await getBlogList(appId)
      this.tagList = data.filter(item => item.moduleId == this.moduleId)
      this.changeTag(this.tagList[0].id)

      console.log(this.blogList);
    },
    changeTag (id) {
      this.tagId = id
      this.blogList = [...this.tagList.find(item => item.id == this.tagId).blogs]
      console.log(this.blogList);
    },
    toBlog (id) {
      uni.navigateTo({
        url: '/pages/blog/blog?blogId=' + id,
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.tagBox {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;

  span {
    padding: 4px 10px;
    display: inline-block;
    white-space: nowrap;
  }
}

.tagBox::-webkit-scrollbar {
  display: none;
}

.active {
  background-color: #d7ae3c;
  border-radius: 12px;
  color: #fff;
  padding: 4px 10px;
}

.blogs {
  display: flex;
  margin-top: 15px;

  .blogs-img {
    width: 130px;
    height: 100px;
    border-radius: 10px;
  }

  .blogs-right {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>